<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>orderItem管理</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">

    <!-- 上传图片框样式，不使用上传组件可以删除此样式 -->
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 150px;
            height: 70px;
            line-height: 150px;
            text-align: center;
        }
        .avatar {
            width: 150px;
            height: 70px;
            display: block;
        }

    </style>
</head>
<body class="hold-transition">
<div id="app">

    <div class="content-header">
        <h1>管理<small>orderItem管理</small></h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>管理</el-breadcrumb-item>
            <el-breadcrumb-item>orderItem管理</el-breadcrumb-item>
        </el-breadcrumb>
    </div>

    <div class="app-container">
        <div style="margin-bottom: 10px">
            <el-button @click="goOrder()" size="mini" type="primary" size="small">返回</el-button>
        </div>
        <div>
            <div class="box">
                <div style="margin-bottom: 10px">
                    基本信息：
                </div>
                <div style="margin-bottom: 20px">
                    <el-row>
                        <el-col :span="3">
                            <div class="grid-content bg-purple">订单编号</div>
                            <div class="grid-content bg-purple-light">{{this.table1.id}}</div>
                        </el-col>
                        <el-col :span="3">
                            <div class="grid-content bg-purple">发货单流水号</div>
                            <div class="grid-content bg-purple-light">{{this.table1.shippingCode}}</div>
                        </el-col>
                        <el-col :span="3">
                            <div class="grid-content bg-purple">用户账号</div>
                            <div class="grid-content bg-purple-light">{{this.table1.username}}</div>
                        </el-col>
                        <el-col :span="3">
                            <div class="grid-content bg-purple">支付方式</div>
                            <div class="grid-content bg-purple-light">
                                <span v-if="this.table1.payType=='1'">在线支付</span>
                                <span v-else>货到付款</span></div>
                        </el-col>
                        <el-col :span="3">
                            <div class="grid-content bg-purple">订单来源</div>
                            <div class="grid-content bg-purple-light">{{this.table1.sourceType}}</div>
                        </el-col>
                        <el-col :span="3">
                            <div class="grid-content bg-purple">物流单号</div>
                            <div class="grid-content bg-purple-light">{{this.table1.shippingCode}}</div>
                        </el-col>
                    </el-row>
                </div>
            </div>


            <div class="box" style="margin-top: 50px">

                <div style="margin-bottom: 10px">
                    收货人信息
                </div>
                <div style="margin-bottom: 20px">
                    <el-row>
                        <el-col :span="3">
                            <div class="grid-content bg-purple">收货人</div>
                            <div class="grid-content bg-purple-light">{{this.table1.receiverContact}}</div>
                        </el-col>
                        <el-col :span="3">
                            <div class="grid-content bg-purple">手机号</div>
                            <div class="grid-content bg-purple-light">{{this.table1.receiverMobile}}</div>
                        </el-col>
                        <el-col :span="3">
                            <div class="grid-content bg-purple">收货地址</div>
                            <div class="grid-content bg-purple-light">{{this.table1.receiverAddress}}</div>
                        </el-col>
                    </el-row>
                </div>
            </div>

            <div class="box" style="margin-top: 50px">
                <div style="margin-bottom: 20px">
                    <div style="margin-bottom: 10px">
                        商品信息
                    </div>
                    <el-table :data="table2.orderItem" border style="width: 100%">
                        <el-table-column prop="image" label="商品图片" width="180">
                            <template slot-scope="scope">
                                <el-image
                                        style="width: 100px; height: 100px"
                                        :src="scope.row.image"
                                        fit="scale-down">
                                </el-image>
                                <!--                <img :src="scope.row.image"/>-->
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="商品名称" width="80"></el-table-column>
                        <el-table-column prop="price" label="价格/货号" width="80"></el-table-column>
                        <el-table-column prop="num" label="数量" width="80"></el-table-column>
                        <el-table-column prop="money" label="小计" width="80"></el-table-column>
                    </el-table>
                </div>
            </div>

            <div class="box" style="margin-top: 50px">
                <div style="margin-bottom: 10px">
                    费用信息
                </div>
                <div style="margin-bottom: 20px">
                    <el-row>
                        <el-col :span="3">
                            <div class="grid-content bg-purple">商品合计</div>
                            <div class="grid-content bg-purple-light">{{this.table1.totalMoney}}</div>
                        </el-col>
                        <el-col :span="3">
                            <div class="grid-content bg-purple">运费</div>
                            <div class="grid-content bg-purple-light">{{this.table1.postFee}}</div>
                        </el-col>
                        <el-col :span="3">
                            <div class="grid-content bg-purple">活动优惠</div>
                            <div class="grid-content bg-purple-light">{{this.table1.preMoney}}</div>
                        </el-col>
                        <el-col :span="3">
                            <div class="grid-content bg-purple">订单总金额</div>
                            <div class="grid-content bg-purple-light">{{this.table1.totalMoney}}</div>
                        </el-col>
                        <el-col :span="3">
                            <div class="grid-content bg-purple">应付款金额</div>
                            <div class="grid-content bg-purple-light">{{this.table1.totalMoney + this.table1.postFee - this.table1.preMoney}}</div>
                        </el-col>
                    </el-row>
                </div>
            </div>

            <div class="pagination-container">
                <el-pagination
                        class="pagiantion"
                        @size-change="fetchData"
                        @current-change="fetchData"
                        :current-page.sync="currentPage"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="size"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</div>
</body>
<script src="/js/vue.js"></script>
<script src="/js/axios.js"></script>
<script src="/js/elementui.js"></script>
<script src="/js/util.js"></script>
<script>
    new Vue({
        el: '#app',
        data(){
            return {
                table1:{},
                currentPage: 1,
                total: 10,
                size: 10,
                searchMap: {},
                pojo: {},
                formVisible: false,
                imageUrl: '',
                orderId:'',
                table2:{}
            }
        },
        created(){
            this.searchMap.id = getQueryString("orderId");
            this.orderId = getQueryString("orderId");
            this.fetchData();
        },
        methods:{
            goOrder(){
                location.href = "order.html";
            },
            fetchData (){
                axios.get(`/order/findOrdersById.do?id=${this.orderId}`).then(response => {
                    this.table2 = response.data;
                    this.table1 = this.table2.order;
                    console.log(this.table2);
                });
            },
            save (){
                // this.pojo.image= this.imageUrl; //如页面有图片上传功能放开注释
                axios.post(`/orderItem/${this.pojo.id==null?'add':'update'}.do`,this.pojo).then(response => {
                    this.fetchData (); //刷新列表
                    this.formVisible = false ;//关闭窗口
                });
            },
            edit (id){
                this.formVisible = true // 打开窗口
                // 调用查询
                axios.get(`/orderItem/findById.do?id=${id}`).then(response => {
                    this.pojo = response.data;
                    // this.imageUrl=this.pojo.image //显示图片  如页面有图片上传功能放开注释
                })
            },
            dele (id){
                this.$confirm('确定要删除此记录吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then( () => {
                    axios.get(`/orderItem/delete.do?id=${id}`).then(response => {
                        this.fetchData (); //刷新列表
                    })
                })
            }
        }
    })
</script>

<style>
    .mydiv {
        border-bottom: 1px solid #cccccc;
        border-left: 1px solid #cccccc;
        border-top: 1px solid #cccccc;
        border-right: 1px solid #cccccc;
    }
    .bg-purple {
        background: #f9fafc;
        text-align: center;
        border-bottom: 1px solid #cccccc;
        border-left: 1px solid #cccccc;
        border-top: 1px solid #cccccc;
        border-right: 1px solid #cccccc;
    }
    .bg-purple-light {
        background: #ffffff;
        text-align: center;
        border-bottom: 1px solid #cccccc;
        border-left: 1px solid #cccccc;
        border-top: 1px solid #cccccc;
        border-right: 1px solid #cccccc;
    }
    .grid-content {
        border-radius: 0px;
        min-height: 36px;
        border-color: #eff0f1;
    }
</style>
</html>
